<template>
    <el-tabs type="border-card" class="edittabform">
        <el-tab-pane label="内容">
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>绑定组件</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-select v-model="obj.bindIds" filterable clearable placeholder="请选择组件" size="mini" multiple>
                        <el-option v-for="card in plugsDataArray" :key="card.id"
                            :label="card.asName ? card.asName : card.name" :value="card.id" />
                    </el-select>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>日期类型</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-radio-group v-model="obj.group">
                        <el-radio :label="0">年/月/日</el-radio>
                        <el-radio :label="1">月</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>表单尺寸</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-radio-group v-model="obj.size">
                        <el-radio label="large">large</el-radio>
                        <el-radio label="small">small</el-radio>
                        <el-radio label="mini">mini</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>标签</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model="obj.title" type="text" />
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="布局">
            <box-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"></box-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
export default {
    name: "DateSearchForm",
    props: {
        predefineColors: Array,
        obj: Object,
        setFontStyle: Function,
        setColorChange: Function,
        plugsDataArray: Array,
    },
    components: {
        BoxForm: () => import('../mixin/BoxForm.vue'),
        Gradient: () => import('@/components/Gradient/index.vue')
    },
    model: {
        prop: "obj",
        event: "change",
    },
    methods: {

    }
}
</script>

<style scoped></style>